<template>
  <view class="product-card" @click="sheep.$router.go('/pages/distribution/detail',{id:product.id})">
    <view class="product-info">
      <image  class="product-img" :src="sheep.$url.cdn(product.image)" mode=""></image>
      <view class="product-title">{{ product.title }}</view>
      <view v-if="Array.isArray(product.price)" class="product-price">￥{{ product.price.length >1 ? product.price.join('~'): product.price[0]}}</view>
      <view v-else class="product-price">￥{{product.price}}</view>
      <view class="product-sales">月销量 {{ formatCharCount(product.sales) }}</view>
    </view>
    <view 
      class="action-btn" 
      :class="{ 'already-added': product?.is_in == 1  }"
      @click.stop="handleAction"
    >
      {{ product?.is_in == 1 ? '已铺货' : '一键铺货' }}
    </view>
  </view>
</template>

<script setup>
	import sheep from '@/sheep';
	import { cloneDeep } from 'lodash';
const emit = defineEmits(['action'])

const props = defineProps({
  product: {
    type: Object,
    required: true,
    default: () => ({})
  }
})

function formatCharCount(num) {
	if (!Number(num)) return num;
	if (num >= 1e3 && num < 1e4) {
		num = (num / 1e3).toFixed(0) + '千+';
	} else if (num >= 1e4 && num < 1e7) {
		num = (num / 1e4).toFixed(0) + '万+';
	} else if (num >= 1e7) {
		num = (num / 1e7).toFixed(0) + '千万+';
	}
	return num; // 返回格式化后的数字
}
const handleAction = () => {
	if(props.product.is_in != 1){
		emit('action', props.product)
	}
}
</script>

<style scoped lang="scss">
.product-card {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.product-img {
  width: 100%;
  height: 340rpx;
	border-radius: 10rpx;
  background-color: #D8D8D8;
  margin: 10rpx 0;
}

.product-title {
  font-size: 30rpx;
  margin: 14rpx 0;
  color: #2E2E2E;
  // 两行省略
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-price {
  font-size: 30rpx;
  color: #ED2828;
  margin-bottom: 10rpx;
}

.product-sales {
  font-size: 26rpx;
  color: #9E9E9E;
  margin-bottom: 26rpx;
}

.action-btn {
  background-color: #426AFF;
  color: #FFFFFF;
  font-size: 36rpx;
  width: 100%;
  height: 70rpx;
  border: 2rpx solid #426AFF;
  border-radius: 10rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.action-btn.already-added {
  background-color: #A1B5FF;
}
</style>